<template>
	<view class="large_box">
		<view class="example">
			<uni-forms ref="baseForm" :modelValue="baseFormData">
				<uni-forms-item label="患者姓名" label-width="100px" required>
					<uni-easyinput v-model="baseFormData.name" placeholder="请输入患者姓名" @input="nameChange" />
				</uni-forms-item>
				<uni-forms-item label="联系方式" label-width="100px" required>
					<view class="mobileInput">
						<uni-easyinput class="" v-model="baseFormData.mobile" placeholder="请输入联系方式"
							:disabled="disabled" />
					</view>
				</uni-forms-item>
				<uni-forms-item label="性别" label-width="100px" required>
					<uni-data-checkbox class="sexInput" v-model="baseFormData.sex" :localdata="sexs"
						:disabled="disabled" />
				</uni-forms-item>
				<uni-forms-item label="出生日期" label-width="100px" required>
					<picker v-if="disabled == false" mode="date" fields="day" :value="baseFormData.birthday"
						:end="birthdayEnd" @change="bindDateChange">
						<input v-model="baseFormData.birthday" disabled placeholder="请选择出生日期" class="inputs" />
					</picker>
					<uni-easyinput v-if="disabled" v-model="baseFormData.birthday" :disabled="disabled" />
				</uni-forms-item>
				<uni-forms-item v-if="disabled" label="年龄" label-width="100px" required>
					<view class="mobileInput">
						<uni-easyinput class="" v-model="baseFormData.age" :disabled="disabled" />
					</view>
				</uni-forms-item>
				<uni-forms-item label="省市区" label-width="100px">
					<picker mode="region" @change="selectHomeChange" :value="homeIndex">
						<input v-model="baseFormData.home" disabled placeholder="请选择省市区" class="inputs" />
					</picker>
				</uni-forms-item>
				<uni-forms-item label="详细地址" label-width="100px">
					<uni-easyinput v-model="baseFormData.homeDetail" placeholder="请输入详细地址" @input="homeDetailChange"
						@change="detailChange" />
				</uni-forms-item>
				<uni-forms-item label="预约科室" label-width="100px" required>
					<picker mode="selector" @change="administrativeChange" :value="baseFormData.administrative"
						:range="administrativeArray">
						<uni-easyinput v-model="baseFormData.administrative" placeholder="请输入预约科室" />
					</picker>
				</uni-forms-item>
				<uni-forms-item label="预约医生" label-width="100px" required>

					<picker mode="selector" @change="administrativeDocterChange"
						:value="baseFormData.administrativeDocter" :range="administrativeDocterArray">
						<uni-easyinput v-model="baseFormData.administrativeDocter" placeholder="请选择预约医生" />
					</picker>
				</uni-forms-item>
				<uni-forms-item label="预约日期" label-width="100px" required>
					<!-- <uni-data-select v-model="baseFormData.date" :localdata="yuyueDate"></uni-data-select> -->
					<uni-easyinput v-model="baseFormData.date" placeholder="请选择日期" @focus="dateClcik"
						disabled></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item label="预约时间" label-width="100px" required>
					<uni-data-select v-model="baseFormData.time" :localdata="yuyueTime"
						@change="timeChange"></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="预约备注" label-width="100px">
					<uni-easyinput v-model="baseFormData.homeDetail" placeholder="请输入预约备注" />
				</uni-forms-item>
				<uni-forms-item label="挂号费" label-width="100px">
					<uni-easyinput disabled value="10元" />
				</uni-forms-item>
			</uni-forms>
		</view>
		<view class="btn">
			<button class="button" type="primary" size="default" @click="onSave">确定</button>
		</view>
		<!-- 消息提示 -->
		<uni-popup ref="popupRefs" type="message">
			<uni-popup-message :type="popupOptions.msgType" :message="popupOptions.messageText"
				:duration="1000"></uni-popup-message>
		</uni-popup>
		<!-- 点击确定后提示的弹框 -->
		<uni-popup ref="savePopup" background-color="" :mask-click="false">

			<div class="save_box">
				<view style="text-align: center; margin-bottom: 18rpx;">
					挂号成功
				</view>
				<view class="save_show_text">医生：{{baseFormData.administrativeDocter}}</view>
				<view class="save_show_text">科室：{{baseFormData.administrative}}</view>
				<view class="save_show_text">时间：{{baseFormData.date}}</view>
				<view class="save_show_text">挂号费：10元</view>
				<view class="saveBtn">
					<button type="primary" size="mini" @click="toShouFei(0)">去收费</button>
					<button type="default" size="mini" @click="toShouFei(1)">暂不收费</button>
				</view>
			</div>

		</uni-popup>
		<!-- 患者姓名的组件 -->
		<inputMask @closeMask="closeMask" topVal="46" :topShow="topShowFlag">
			<view class="li" v-for="(item,index) in peopleData" :key="index" @click="peopleClick(item)">
				<image class="sexFlag" :src="index%2==0?sexFlagImage[0]:sexFlagImage[1]" mode=""></image>
				<text class="name">{{item.name}}</text>
				<text class="age">{{item.age}}岁</text>
				<text class="mobile">{{item.tel}}</text>
			</view>
		</inputMask>
		<!-- 详细地址的输入框 -->
		<inputMask @closeMask="closeMask" topVal="355" :topShow="homeDetailShow">
			<view class="li2">
			</view>
		</inputMask>
		<uni-popup ref="datePopup">
			<view class="date_title">
				<div class="text">请选择预约日期</div>
				<view class="date_close" @click="dateClosePopup">×</view>
			</view>
			<view class="date_box">
				<view :class="['date_box_li',datePopupIndex == index?'date_box_li_select':'']" v-for="(item,index) in 7"
					:key="index" @click="dateSelect(index)">
					{{1234564322}}
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		watchEffect
	} from "vue";
	import inputMask from "./InputMask.vue";
	import {
		patientSelector,
		deptSelector,
		userSelector,
		addYuyue
	} from "/api/home/index.js";
	// 格式化当前时间
	let newDate = new Date();
	let year = newDate.getFullYear();
	let month = newDate.getMonth() + 1;
	let day = newDate.getDate();
	console.log(day);
	const keshiList = ref([]);
	const datePopup = ref();
	const doctorAllData = ref([]); //存储根据科室返回的所有医生数据
	const datePopupIndex = ref(-1)
	const administrativeDocterArray = ref([])
	const doctorTimeAll = ref([]); //存储所有的医生的时间
	const keshiIndex = ref(0)
	const baseFormData = ref({
		name: '',
		mobile: '', //联系方式
		birthday: '', //出生日期
		home: '', //省市区
		homeDetail: "", //详细地址
		administrative: '', //预约科室
		administrativeDocter: '', //预约医生
		sex: 0,
		date: "", //预约日期
		time: 1, //预约时间
		age: "", //年龄
		areaCityPro: [],
		peopleList: {},
		deptList: {},
		deptId: "",
		selectTime: ""
	})
	baseFormData.value.date = `${year}-${month}-${day}`
	const yuyueTime = ref([])
	// 预约科室
	const administrativeArray = ref([]);
	const getDoctorData = (param) => {
		baseFormData.value.administrativeDocter = "";
		yuyueTime.value = [];
		userSelector({
			DeptId: param
		}).then(doctorRes => {
			if (doctorRes.code == 200) {
				doctorAllData.value = doctorRes.data;
				let doctorArr = [];
				let timeArr = [];
				let startEndTime = [];
				startEndTime[0] =
					doctorRes.data.forEach((item, index) => {
						doctorArr.push(item.name);
						let smallTime = [];
						let smallTimes = [];
						smallTimes[0] = new Date(`${year}-${month}-${day} ${item.shifts.begin}`)
							.getHours();
						smallTimes[1] = new Date(`${year}-${month}-${day} ${item.shifts.end}`).getHours();
						smallTime[index] = [];
						for (let i = smallTimes[0]; i <= smallTimes[1]; i++) {
							smallTime[index].push({
								text: `${i}:00 余${item.shifts.quantity}`,
								value: i,
								time: `${i}:00`
							})
						}
						doctorTimeAll.value = smallTime;
					})
				administrativeDocterArray.value = doctorArr;

			}
		})
	}
	const init = () => {
		deptSelector().then(res => {
			if (res.code == 200) {
				keshiList.value = res.data;
				let arr = [];
				administrativeArray.value = res.data.map(item => item.key);
				baseFormData.value.deptId = keshiList.value[keshiIndex.value].value
				getDoctorData(keshiList.value[keshiIndex.value].value)
			}
		})
	}
	init();
	const disabled = ref(true); //用户名选择的时候下方的内容是否可以自行编辑
	const sexFlagImage = ref(["../../../static/icon/男.png", "../../../static/icon/女.png"]);
	const yuyueDate = ref([{
			time: '2023-11-08',
			flag: 1, //0是暂未排班，1是余69等可选的
			yuNum: 10,
			id: '0',
			text: "2023-11-08",
			value: 0
		},
		{
			time: '2023-12-08',
			flag: 1, //0是暂未排班，1是余69等可选的
			yuNum: 69,
			id: '0',
			text: "2023-11-08",
			value: 1
		},
	])
	const peopleData = ref([])
	// 单选数据源
	const sexs = ref([{
		text: '男',
		value: 0
	}, {
		text: '女',
		value: 1
	}])
	// 出生日期
	const date = ref("2023-10-10")
	let nowDate = new Date();
	let nowYear = nowDate.getFullYear();
	let nowMonth = nowDate.getMonth() + 1;
	let nowDay = nowDate.getDate();
	const birthdayEnd = ref()
	baseFormData.value.birthday = `${nowYear}-${nowMonth<10?'0'+nowMonth:nowMonth}-${nowDay<10?'0'+nowDay:nowDay}`
	birthdayEnd.value = `${nowYear}-${nowMonth<10?'0'+nowMonth:nowMonth}-${nowDay<10?'0'+nowDay:nowDay}`
	const popupOptions = ref({
		msgType: "",
		messageText: "",
	})
	const popupRefs = ref();
	// 出生日期的改变事件
	const bindDateChange = (e) => {
		baseFormData.value.birthday = e.detail.value;
	}
	// 省市区
	const homeArray = ref([])
	const homeIndex = ref("北京")
	const selectHomeChange = (e) => {
		baseFormData.value.areaCityPro = e.detail.code;
		let val = e.detail.value.join("-");
		baseFormData.value.home = val;
	}
	const inputs = ref();

	const administrativeChange = (e) => {
		baseFormData.value.administrative = administrativeArray.value[Number(e.detail.value)];
		keshiIndex.value = Number(e.detail.value)
		init();
	}
	// 预约医生
	const administrativeDocterChange = (e) => {
		baseFormData.value.administrativeDocter = administrativeDocterArray.value[Number(e.detail.value)]
		yuyueTime.value = doctorTimeAll.value[Number(e.detail.value)]
		baseFormData.value.deptList = doctorAllData.value[Number(e.detail.value)]
	}
	// -------------------点击确定的点击事件-----------------------
	const savePopup = ref(); //去收费和暂不收费
	const onSave = () => {
		let nullArr = [undefined, null, ""];
		let count = 0;
		let nullObj = {
			name: '',
			mobile: '',
			birthday: '',
			administrative: '', //科室
			administrativeDocter: '', //医生
			date: "", //预约日期
			time: 1, //预约时间
		}
		for (let key in nullObj) {
			if (nullArr.indexOf(baseFormData.value[key]) != -1) {
				count += 1;
			}
		}
		if (count != 0) {
			return uni.showToast({
				title: '请输入完成',
				//将值设置为 success 或者直接不用写icon这个参数
				icon: 'error',
				duration: 2000,
			})
		} else {
			savePopup.value.open('center')
		}
	}
	// 点击去收费和暂不收费
	const toShouFei = (val) => {
		savePopup.value.close()
		if (val == 0) {
			console.log('去收费');
		} else {
			let params = {
				patient: {
					address: baseFormData.value.homeDetail,
					age: baseFormData.value.age,
					area: baseFormData.value.areaCityPro[0],
					birthday: baseFormData.value.birthday,
					certno: baseFormData.value.peopleList.certno,
					city: baseFormData.value.areaCityPro[1],
					fixPhone: baseFormData.value.peopleList.fixPhone,
					gender: baseFormData.value.peopleList.gender,
					id: baseFormData.value.peopleList.id,
					isGravida: baseFormData.value.peopleList.isGravida,
					isLactation: baseFormData.value.peopleList.isLactation,
					name: baseFormData.value.peopleList.name,
					occupation: baseFormData.value.peopleList.occupation,
					province: baseFormData.value.peopleList.province,
					tel: baseFormData.value.peopleList.tel
				},
				patnRlts: [],
				reservation: {
					deptId: baseFormData.value.deptId,
					deptName: baseFormData.value.administrative,
					id: baseFormData.value.deptList.id,
					isOnline: baseFormData.value.deptList.isOnline,
					userId: baseFormData.value.administrativeDocter,
					name: baseFormData.value.peopleList.name,
					registrationFee: baseFormData.value.deptList.registrationFee.firstVisitSalesPrice,
					time: baseFormData.value.selectTime,
				}
			}
			addYuyue(params).then(res => {})
			uni.navigateBack();
		}
	}
	const topShowFlag = ref(false)
	// 患者姓名的内容改变事件
	const nameChange = (e) => {
		console.log(e);
		baseFormData.value.name = e
		// if(baseFormData.value.name == ""){
		// 	baseFormData.value.name = "";
		// 	baseFormData.value.mobile = "";
		// 	baseFormData.value.birthday = "";
		// 	baseFormData.value.age = "";
		// 	baseFormData.value.sex = 0;
		// 	disabled.value = false;
		// }else{
		// 	patientSelector({baseIdCommonInput:"1"}).then(res=>{
		// 	if(res.code == 200){
		// 		peopleData.value = res.data;
		// 	}
		// })
		// }

		topShowFlag.value = true;
		let query = uni.createSelectorQuery();
		let dom = query.select(".mobileInput")
		dom.fields({
			rect: true,
			scrollOffset: true
		}, function(res) {}).exec(function(eres) {})
	}
	const maskStop = (val) => {
		topShowFlag.value = val;
	}
	const closeMask = (val) => {
		topShowFlag.value = val;
		homeDetailShow.value = val;
	}
	const homeDetailShow = ref(false);
	// 详细地址输入框的change
	const homeDetailChange = () => {
		// homeDetailShow.value = true;
	}
	const detailChange = () => {
		homeDetailShow.value = false;
	}
	// 弹框人员的点击
	const peopleClick = (item) => {
		disabled.value = true;
		baseFormData.value.name = item.name;
		baseFormData.value.mobile = item.tel;
		baseFormData.value.birthday = item.birthday;
		baseFormData.value.age = item.age;
		baseFormData.value.sex = item.gender == '女' ? 1 : 0;
		baseFormData.value.peopleList = item;
		topShowFlag.value = false;

	}
	watchEffect(() => {
		if (baseFormData.value.name === '') {
			baseFormData.value.name = "";
			baseFormData.value.mobile = "";
			baseFormData.value.birthday = "";
			baseFormData.value.age = "";
			baseFormData.value.sex = 0;
			disabled.value = false;
			topShowFlag.value = false;
		} else {
			patientSelector({
				SearchKey: baseFormData.value.name,
			}).then(res => {
				if (res.code == 200) {
					peopleData.value = res.data;
				}
			})
		}
	})
	// 预约日期的点击事件
	const dateClcik = () => {
		datePopup.value.open('bottom')
	}
	const dateClosePopup = () => {
		datePopup.value.close();
	}
	const dateSelect = (index) => {
		datePopupIndex.value = index;
		datePopup.value.close();
	}
	const timeChange = (e) => {
		baseFormData.value.selectTime = yuyueTime.value[e].time;
	}
</script>

<style lang="scss" scoped>
	.large_box {
		box-sizing: border-box;
		background-color: #f3f3f3;
		height: 100vh;
		padding: 0;

		.example {
			height: 92%;
			padding: 20rpx;
			background-color: #fff;
			overflow-y: auto;
			box-sizing: border-box;

			.inputs {
				display: inline-block;
				border: 1rpx solid #e3e3e3;
				width: calc(99% - 32rpx);
				padding: 16rpx;
				border-radius: 6rpx;
				font-size: 26rpx;
			}
		}

		.btn {
			height: 8%;
			position: relative;

			.button {
				color: #fff;
				background-color: #0055ff;
				position: absolute;
				width: 100%;
				bottom: 0;
				left: 0;

				&:active {
					background-color: #00aaff;
				}
			}
		}

		.save_box {
			width: 540rpx;
			height: 300rpx;
			border-radius: 10rpx;
			background-color: #fff;
			padding: 30rpx;

			.save_show_text {
				width: 100%;
				text-align: center;
				padding-bottom: 6rpx;
			}

			.saveBtn {
				width: 100%;
				display: flex;
				justify-content: space-between;
				position: absolute;
				bottom: 30rpx;
				left: 0;
			}
		}
	}

	.li {
		width: 100%;
		height: 80rpx;
		background-color: #fff;
		line-height: 80rpx;
		border-bottom: 1px solid #ccc;

		.sexFlag {
			width: 58rpx;
			height: 58rpx;
			vertical-align: middle;
			margin-left: 30rpx;
		}

		.name {
			margin-left: 20rpx;
		}

		.age {
			margin-left: 50rpx;
		}

		.mobile {
			float: right;
			margin-right: 30rpx;
		}
	}

	.li2 {
		>view {
			width: 100%;
			height: 70rpx;
			line-height: 70rpx;
			padding: 0 30rpx;
			border-bottom: 1px solid #f9f9f9;
			font-size: 28rpx;
		}
	}

	.date_title {
		width: 750rpx;
		height: 100rpx;
		line-height: 100rpx;
		background-color: #fff;
		position: relative;
		border-radius: 30rpx 30rpx 0 0;

		.text {
			text-align: center;
			font-size: 30rpx;
		}

		.date_close {
			color: #000;
			position: absolute;
			top: 30rpx;
			right: 30rpx;
		}
	}

	.date_box {
		width: 750rpx;
		height: 50vh;
		background-color: #fff;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 20rpx;
		box-sizing: border-box;

		.date_box_li {
			width: 330rpx;
			height: 90rpx;
			line-height: 90rpx;
			border: 3rpx solid #ccc;
			border-radius: 20rpx;
			text-align: center;

			.num {
				color: #19be83;
				font-weight: 600;
			}
		}
	}

	.date_box_li_select {
		border: 3rpx solid #19be83 !important;
	}
</style>